﻿
/*jqueryUI中鼠标拖动改变div大小的Icon图标样式*/
.ui-icon {
    width: 10px;
    height: 10px;
    bottom: -3px;
    right: -3px;
}

.ui-resizable-e {
    right: -1px;
    width: 4px;
}

.ui-resizable-s {
    bottom: -1px;
    height: 4px;
}

.jtk-connector {
    z-index: 9;
}

.jtk-endpoint {
    z-index: 12;
    opacity: 0.8;
    cursor: pointer;
}

.jtk-overlay {
    color: #434343;
    font-weight: 400;
    padding: 4px;
    z-index: 10;
}

    .jtk-overlay.jtk-hover {
        color: #434343;
    }

path {
    cursor: pointer;
}

.flow-container {
    position: relative;
    overflow: auto;
}

.flow-panel {
    overflow: hidden;
    height: 100%;
    position: relative;
    border: 1px solid #dcdcdc;
}

    .flow-panel > div {
        height: 100%;
    }

.flow-left {
    position: absolute;
    width: 100px;
    overflow: visible;
}

    .flow-left .sidebar-menu legend{
        font-size:13px;
        padding-top:5px;
        padding-left:5px;
        margin-bottom:5px;
    }

    .flow-right {
        position: absolute;
        width: 300px;
        overflow: visible;
    }

.flow-center {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    border: 1px solid #dcdcdc;
}

.flow-shape, .flow-node {
    display: inline-block;
    border-radius: 0.5em;
    width: 60px;
    text-align: center;
    border: 1px solid #346789;
    background-color: #92ef91;
    font-size: 9pt;
    height: 30px;
    line-height: 30px;
    -ms-transform: rotate(0deg); /* IE 9 */
    -moz-transform: rotate(0deg); /* Firefox */
    -webkit-transform: rotate(0deg); /* Safari and Chrome */
    -o-transform: rotate(0deg); /* Opera */
    transform: rotate(0deg);
}

.flow-node {
    position:absolute;
    z-index:20;
    font-size:14px;
    line-height:14px;
}

.flow-shape {
    margin-left:15px;
    margin-top:20px;
    float: left;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: pointer;
}

    .flow-shape.start, .flow-node.start {
        background-color: deepskyblue;
        border-radius: 30px;
    }

    .flow-shape.comment, .flow-node.comment {
        background-color: yellow;
        border-top-left-radius:5px;
    }

    .flow-node.comment {
        width: 80px;
        height:60px;
    }

    .flow-shape.end, .flow-node.end {
        background-color:lightyellow;
        border-radius: 30px;
    }

.flow-select {
    position: absolute;
    width: 0px;
    height: 0px;
    font-size: 0px;
    margin: 0px;
    padding: 0px;
    border: 1px dashed #0099FF;
    background-color: #C3D5ED;
    z-index: 1000;
    filter: alpha(opacity:60);
    opacity: 0.6;
    display: none;
}

.flow-node:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.flow-node label, .flow-node textarea {
    height: 100%;
    width: calc(100% - 5px);
}

.flow-node textarea {
    resize: none;
    border: none;
    outline: none;
    overflow:hidden;
    background-color: transparent;
    line-height:1;
}

.flow-node.start label, .flow-node.end label, .flow-node.start textarea, .flow-node.end textarea {
    width: calc(100% - 15px);
}

.selected {
    border: 1px solid #ff0000;
    background-color: #D6DFF7;
}

.flow-prop
{
    margin-bottom:4px;
}

    .flow-prop textarea{
        width:100%;
    }

    .flow-prop .flow-prop-flag {
        margin-left: 5px;
    }

    .flow-prop input {
        margin-left: 3px;
    }

    .flow-prop input.flow-prop-input {
        width:185px;
    }

    .flow-prop .flow-condition
    {
        float:right;
        margin-right:5px;
        cursor:pointer;
    }

    .flow-prop span {
        text-align: justify;
        text-justify: distribute-all-lines;
        text-align-last: justify;
        display: inline-block;
        width: 90px;
        padding-left:1px;
    }

.flow-prop div {
    display:inline-block;
}

.flow-prop i{
    margin-left:3px;
    font-size:14px;
    cursor:pointer;
}

.flow-prop-set legend, .flow-data-set legend {
    padding-left: 5px;
    font-size: 13px;
    margin-bottom: 5px;
}

.flow-data {
    margin-bottom:4px;
}

.flow-data div {
    display: inline-block;
}

.flow-data input.data {
    width:93px;
    border:0px solid #ccc;
    border-bottom-width:1px;
    outline:none;
}

.flow-data input.data:focus {
    border-bottom-color: blue;
}

.flow-data-label, .flow-data-name, .flow-data-value {
    width: 94px;
}

.flow-data-remove {
    text-align:center;
    width: 15px;
    font-size:15px;
}

.add-flow-data {
    background-color:whitesmoke;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}
